// 首页渲染数据
// 渲染北京和安徽的旅游景点数据
// 数据渲染结束之前，页面在加载层
let index = layer.load(0,{
  shade:['.5','#ccc']
})

// jq-ajax请求北京的景点数据
$.ajax({
  url:'../server/scenics.php',
  data:{pid:2},
  dataType:'json',
  success(res){
    // console.log(res);
    // 结构获取数据
    let {data} = res;
    console.log(data);
    let str = '';
    data.forEach(item=>{      
      str += `
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="thumbnail">
            <img src="${item.imgpath.split('==========')[0]}" alt="...">
            <div class="caption">
                <h3>${item.name}</h3>
                <p class='introduce'>${item.introduce}</p>
                <p>
                    <a href="#" class="btn btn-default" role="button">查看详情</a>
                </p>
            </div>
        </div>
      </div>      
      `
    })
    // 将拼接的数据渲染到页面
    $('.beijing').html(str);
  }
})
// jq-ajax请求安徽的景点数据
$.ajax({
  url:'../server/scenics.php',
  data:{pid:13},
  dataType:'json',
  success(res){
    // console.log(res);
    // 结构获取数据
    let {data} = res;    
    let str = '';
    data.forEach(item=>{      
      str += `
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="thumbnail">
            <img src="${item.imgpath.split('==========')[0]}" alt="...">
            <div class="caption">
                <h3>${item.name}</h3>
                <p class='introduce'>${item.introduce}</p>
                <p>
                    <a href="#" class="btn btn-default" role="button">查看详情</a>
                </p>
            </div>
        </div>
      </div>      
      `
    })
    // 将拼接的数据渲染到页面
    $('.anhui').html(str);
    // 页面数据渲染完毕，关闭加载层
    layer.close(index);
  }
})


// https://bkimg.cdn.bcebos.com/pic/2fdda3cc7cd98d1001e976fc3376af0e7bec55e73aef
// ==========https://bkimg.cdn.bcebos.com/pic/4a36acaf2edda3cc7cd9c0ed13a02e01213fb90e34ef
// ==========https://img14.360buyimg.com/n0/jfs/t1/182475/23/18852/165618/61132c33E3100ab6f/133d546d49c728d7.jpg
